<template>
	<view>
		<view class="di" v-for="(item,index) in dataList" :key="item.groupName" >
			<view class="hor">
				<view class="ver">
					<image :src="item.image" class="head"></image>
					<view style="margin-left:55px;margin-top:5px;">
					<text style="color: #ffffff;font-weight:500;font-size:30px;">{{item.name}}</text>
					</view>
				</view>
				<view>
					<view>
						<view class="tex">
						<text class="txt">{{item.id}}</text>
						<text class="txst">获赞</text>
						</view>
						<view class="tex">
						<text class="txt">{{item.id}}</text>
						<text class="txst">关注</text>
						</view>
						<view class="tex">
						<text class="txt">{{item.id}}</text>
						<text class="txst">粉丝</text>
						</view>	
					</view >
					<view class="hor">
						<button class="but" id="gz" v-show="shouUp" @click="gz()">
							<text>关注</text>
						</button>
						<button class="but" id="gz" v-show="!shouUp" @click="gz()">
							<text>已关注</text>
						</button>
						<button class="but"><text>消息</text></button>
					</view>
				</view>
			</view>
		</view>
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				<text>动态</text> <text style="margin-left:10px;">6</text>
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				<text>小组</text> <text style="margin-left:10px;">6</text>
			</view>
		</view>
		
		<view v-for="(item,index) in postList" :key="item.groupName"   v-if="filterIndex===0">
			<!-- <view class="group" >
				<text style="font-size:30rpx;color:#aaaaaa;padding-left:20px;">{{item.groupName}}</text>
				<view style="height: 1px;width:100%;background-color: #999997;margin-top: 9px;"/>
			</view> -->
			<scroll-view  >
				<view class="post">
					<view 
						v-for="(items, index) in item.childer" :key="indexs"
						class="post-item"
						@click="navToDetailPage(item)"
					>
						<view class="post-head">
							<view class="post-image">
								<image :src="items.image" mode="aspectFill" ></image>
							</view>						
								<text class="post-name">{{items.name}}</text>
								<text class="post-time">{{items.time}}</text>
						</view>
		
						<view class="post-content">
							<text style="font-size: 18px;font-weight:700;padding-bottom:10px;">{{items.title}}</text>
							<text>{{items.content}}</text>
							<view class="post-foot">
								<view class="post-dianzan">
									<uni-icons type="hand-thumbsup" class="post-blank"></uni-icons>
									<text class="post-blank">7</text>
									<uni-icons type="chatbubble" class="post-blank"></uni-icons>
									<text class="post-blank">3</text>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view v-for="(item,index) in starList" :key="item.Name"  @click="openList(item)" v-if="filterIndex===1">
			<view class="listItem">
				<view class="star-list">
					<view 
						v-for="(items, index) in item.chirder" :key="indexs"
						class="star-item"
						@click="navToDetailPage(item)"
					>
						<view class="image-wrapper">
							<image :src="items.image" mode="aspectFill" ></image>
						</view>
						<view class="price-box">
							<text class="title clamp">{{items.name}}</text>
							<text class="time">{{items.time}}</text>
							<text class="time">{{items.place}}</text>
							<view class="tag">
								<button>{{items.tag1}}</button>
								<button>{{items.tag1}}</button>
							</view>
							<view class="staritem"><view class="star">star</view></view>
						</view>
					</view>
				</view>	
			</view>		
		</view>
			
	
	</view>
</template>

<script >
	export default {
		data() {
			return {
				shouUp:true,//关注按钮
				/* tabIndex: 0, */
				contentList: [
						"关注",
						"推荐",
						"热点",
						"体育",
						'财经',
						'娱乐',
					],
	
				
				dataList:[
					{
					id: 1,
					groupName: "与画",
					name: "LIly",
					title:"yyyy",
					content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
					image:"../../static/yyt.jpg",
					time: "2020-05-29",
					year:"2020",
					}
				],
				filterIndex: 0, 
				
				starList:[
					{
					id: 3,
					groupName: "与画",
					flag:1,
					isShowList:false,
					childer: [{
						id: 11,
						name: "LIly",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29"
						},
						
							{
							id: 13,
							name: "ghyujk",
							title:"一人一曲~说说你喜欢的古典乐：",
							content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
							image:"../../static/yyt.jpg",
							time: "2020-05-29"
							},]
					},
					{
					id: 2,
					groupName: "帖子",
					isShowList:false,
					childer: [{
						id: 21,
						name: "lili",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29"
						}, {
						id: 22,
						name: "lfgyi",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29"
						}]
					},{
						id: 1,
						Name: "活动",
						isShowList:false,
						flag:1,					
						chirder: [{
							id: 11,
							name: "山海心经|天地天地天地",
							place: "杭州 下沙浙江工商",
							time: "2020-05-29-2020.8.9",
							image:"../../static/yyt.jpg",
							tag1:"绘画展",
							tag2:"绘展",
							tag3:"画展"
							},
							{
								id: 12,
								name: "山海心经|天地天地天地",
								place: "杭州 下沙浙江工商",
								time: "2020-05-29-2020.8.9",
								image:"../../static/yyt.jpg",
								tag1:"绘画展",
								tag2:"绘展",
								tag3:"画展"
						}]	
					}
				],
				
				
				
				postList:[
					{
					id: 3,
					groupName: "与画",
					flag:1,
					isShowList:false,
					childer: [{
						id: 11,
						name: "LIly",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29",
						year:"2020"
						},
						
							{
							id: 13,
							name: "ghyujk",
							title:"一人一曲~说说你喜欢的古典乐：",
							content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
							image:"../../static/yyt.jpg",
							time: "2020-05-29",
							year:"2020"
							}]
					},
					{
					id: 2,
					groupName: "帖子",
					isShowList:false,
					childer: [{
						id: 21,
						name: "lili",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29",
						year:"2020"
						}, {
						id: 22,
						name: "lfgyi",
						title:"一人一曲~说说你喜欢的古典乐：",
						content: "之前听了不少古典乐，从格列高利时期的古典乐到20世纪的浪漫主义的，突然想来跟大家分享。一曲足矣，自己先来，Tartini-E major,D.50:II.Grave没有之一。从小提琴响起的那一刻起，整颗心都融化了。你呢？理由？",
						image:"../../static/yyt.jpg",
						time: "2020-05-29",
						year:"2020"
						}]
					}],
				
				
				
			}
			
				
			
				tabBars:[
						{
							name: '关注',
							id: 'guanzhu'
						},
						{
							name: '推荐',
							id: 'tuijian'
						},
						{
							name: '热点',
							id: 'redian'
						},
						{
							name: '体育',
							id: 'tiyu'
						},
						{
							name: '财经',
							id: 'caijing'
						},
						{
							name: '娱乐',
							id: 'yule'
						}
					]

		
		
		
		
		},
		methods: {
			
			tabTap(e) {
				console.log(e.currentTarget.id)
				this.tabIndex = e.currentTarget.id
			},

			 gz:function(){
				this.shouUp=!this.shouUp;
			},
			
			tabClick(index){
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				/* if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				} */
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			openList:function(item){
				item.isShowList=!item.isShowList
			}
		}
	}
</script>

<style lang="scss" scoped>

page{
	height: 100%;
}

.di{
	height:160px;
	background-color: #b0e3ff;
}


.hor{
	display: inline-flex;
	flex-direction: row;
	width:100%;
}
.ver{
	display: inline-flex;
	flex-direction: column;
	}

.head{
	margin-left: 40px;
	width:90px;
	height:90px;
	border-radius: 45px;
	}
	
	
	

	.tex{
	margin-left:30px;
	margin-top:25px;
	display: inline-flex;
	text-align: center;
	flex-direction: column;
	}
	.txt{
		color: #ffffff;
		font-weight:300;
		font-size:23px;
	}
	.txst{
		color: #ffffff;
		font-weight:400;
		font-size:18px;
		padding-top: 10px;
	}
	
	/deep/button{
		margin-left:40px;
		position: relative;
		font-size: 13px;
		line-height: 1.5;
		color: #ffffff;
		height:20px;
		width: 150px;
		background-color: rgba(0,0,0,0);
		margin-top: 18px;
		&:after{
		border-color: #ffffff ;
		border-radius: 15px;
		}
		
	}
	
	.navbar{
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 100upx;
		padding-left:20px;
		padding-right:20px;
		padding-bottom:5px;
		background: #ffffff;
		margin-top: 5px;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			border-radius: 40px;
			color: $font-color-dark;
			background-color:#ffffff;
			border:0px rgba(0,0,0,0);
			position: relative;
			&.current{
				color:$font-color-dark;
				background-color: #b0e3ff ;
				border:0px rgba(0,0,0,0);
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 100%;
					height: 0;
					border:0px rgba(0,0,0,0);
					
					/* border-bottom: 4upx solid rgba($color: #000000, $alpha: 1.0); */
				}
			}
		}
		
		
	}
	
	
	.uni-tab-item {
			/* #ifndef APP-PLUS */
			display: inline-block;
			/* #endif */
			flex-wrap: nowrap;
			padding-left: 10rpx;
			padding-right: 10rpx;
	}
	
	.uni-tab-item-title {
			color: #000000;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
	
	}
	
	.uni-tab-item-title-active {
		color: #797979;
		font-size: 40rpx;
		border-bottom: solid #797979;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	.group{
		display:flex;
		flex-direction:row;
		/* padding-left:20px; */
		padding-top: 10px;
		height:40px;
		width:80px;
		
		/* text-align: center; */
		background-color: #ffffff;
	}
	.post{
		display:flex;
		flex-wrap:wrap;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 10px;
	}
	.post-item{
		display: inline-flex;
		flex-direction: column;
		width: 100%;
		
		padding-bottom: 30px;
		margin-bottom: 10px;
		border: 2upx solid  #aaaaaa;
		border-radius: 10px;
		position:relative;
		.post-head{
			margin:10px;
			display: inline-flex;
			flex-direction: row;
		}
		
		.post-image{
			width: 40px;
			height: 40px;
			image{
				width: 100%;
				border-radius: 10px;
				height: 100%;
				opacity: 1;
			}
		}
		.post-name{
			font-size: 17px;
			color: $font-color-dark;
			line-height: 80upx;
			font-weight:600;
			padding-left: 15px;
		}
		.post-time{
			position:absolute;
			right:20rpx;
			font-size: 12px;
			color: #7b7d81;
			line-height: 80upx;
			padding-bottom:2px;
			&:before{
				font-size: 26upx;
			}
		}
		.post-content{
			display: inline-flex;
			flex-direction: column;
			padding-left: 20px;
			font-size: 12px;
			padding-right: 10px;
			
		}
		.post-foot{
			margin-top: 5px;
			position:relative;
		}
		.post-dianzan{
			position:absolute;
			right:10rpx;
		}
		.post-blank{
			padding-right:5px;
		}
	}
	
	
	.star-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 20upx;
		margin-bottom: 0px;
		background: #ffffff;
		
		.star-item{
			display:flex;
			flex-direction: row;
			width: 100%;
			padding-bottom: 30upx;
			border: 2upx solid  #aaaaaa;
			padding-left: 10px;
			border-radius: 10px;
			margin-bottom: 5px;
			margin-top: 5px;
			/* &:nth-child(2n+1){
				margin-right: 4%;
				
			} */
		}
		.image-wrapper{
			width: 90px;
			height: 130px;
			border-radius: 13px;
			margin-top: 10px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.price-box{
			display: flex;
			flex-direction: column;
			padding-left: 30upx;
			padding-top:10px;
			font-size: 24upx;
			color: $font-color-light;
		}
		.title{
			font-size: 17px;
			color: $font-color-dark;
			line-height: 80upx;
			font-weight:800;
		}
		
		.time{
			font-size: 12px;
			color: #7b7d81;
			line-height: 1;
			padding-bottom:2px;
			&:before{
				font-size: 26upx;
			}
		}
		.tag{
			display:flex;
			flex-direction: row;
			margin-top: 10px;
			button{
				width:50px;
				height:20px;
				line-height: 17px;
				justify-content: center;
				padding: 0px;
				margin:0px;
				margin-right: 4px;
				font-size:3px;
				color: #5500ff;
				background-color: rgba(0,0,0,0);
				border-radius: 5px;
				&:after {
				    border-color:#5500ff; 
					border-width: 1px;
					}   
			}
		}
	}
	.staritem{
		position:relative;
	}
	.star{
		position:absolute;
		right:10rpx;
	}
	
	.but{
		width:70px;
		&.current{
			color:$font-color-dark;
			background-color: #b0e3ff ;
			border:0px rgba(0,0,0,0);
		}
	}
	
	
	.but{
		width:70px;
	}
</style>
